<!--
 * @Description:: 请补充填写
 * @Version: 1.0
 * @Author: 小白
 * @Date: 2022-04-14 14:26:46
 * @LastEditors: 小白
 * @LastEditTime: 2025-09-09 17:46:11
 * @FilePath: \tmsadmin\src\views\home\components\table.vue
-->

<template>
  <el-table :data="props.tableData" v-loading="props.loading" style="width: 100%"
    :header-cell-style="{ background: '#FAFAFA', color: 'rgba(0,0,0,0.85)' }"
    :default-sort="{ prop: 'createTime', order: 'descending' }" @selection-change="handleSelectionChange">
    <template #empty>
      <div class="v2-table__empty-data v2-table__empty-border" style="width: 100%">
        <div class="v2-table__empty-default">
          <div style="padding-top: 40px; height: 50px">
            <i class="icon ion-ios-briefcase-outline" style="font-size: 60px" />
          </div>
          <span>暂无数据</span>
        </div>
      </div>
    </template>
    <el-table-column type="selection" fixed="left" align="center" width="50" />
    <el-table-column v-for="item in tableColumns" :key="item.id" :fixed="item.fixed" :prop="item.prop"
      :label="item.title" :min-width="item.minwidth" :sortable="item.sortable" :filters="item.filters"
      :align="item.align" :filter-method="item.filters && filterHandler" :show-overflow-tooltip="true">
      <template #default="scope">
        <template v-if="item.prop == 'action'">
          <el-button size="small" type="warning" @click="showEdit(scope.row, '编辑')">
            编辑
          </el-button>
        </template>
        <template v-else-if="item.prop == 'index'">
          {{ scope.$index + 1 }}
        </template>
        <template v-else-if="item.prop == 'state'">
          <el-popover v-if="scope.row.signUrl" class="box-item" width="300" placement="top-start">
            <div>
              <img v-if="scope.row.signUrl" :src="'data:image/svg+xml;base64,' + scope.row.signUrl"
                style="width: 300px;" />
              <span v-else>暂无签名</span>
            </div>

            <template #reference>
              <span :style="{ color: scope.row.state == '0' ? 'red' : scope.row.state == '1' ? '#e6a23c' : 'green' }">
                {{ scope.row.state == '0' ? '待发货' : scope.row.state == '1' ? '已发货' : '已签收' }}
              </span>
            </template>
          </el-popover>
          <span v-else :style="{ color: scope.row.state == '0' ? 'red' : scope.row.state == '1' ? '#e6a23c' : 'green' }">
                {{ scope.row.state == '0' ? '待发货' : scope.row.state == '1' ? '已发货' : '已签收' }}
              </span>
        </template>
        <template v-else-if="item.prop == 'plateNumber'">

          <el-popover class="box-item" placement="top-start">
            <div style="width: 450px;">
              <div style="margin-bottom: 10px;">姓名：{{ scope.row.driverName }}</div>
              <div>电话：{{ scope.row.driverPhone }}</div>
            </div>
            <template #reference>
              <span style="cursor: pointer;color: #409EFF;">{{ scope.row.plateNumber }}</span>
            </template>
          </el-popover>
        </template>
        <template v-else>
          {{ scope.row[item.prop] }}
        </template>
      </template>
    </el-table-column>
  </el-table>
  <div class="pagination">
    <div style="line-height: 32px;">
    </div>
    <el-pagination v-model:current-page="props.pageNum" v-model:page-size="props.pageSize"
      :page-sizes="[10, 30, 50, 100]" :background="true" layout="sizes, prev, pager, next" :total="props.total"
      @size-change="handleSizeChange" @current-change="handleCurrentChange" />
  </div>
</template>
<script lang="ts" setup>
import { ElMessageBox, ElMessage } from 'element-plus'
import { REQUEST } from '@/api/request'
const emits = defineEmits(['change', 'edit', 'ok', 'selectionChange',])
const props = defineProps({
  tableData: { type: Array, default: [] },
  tableColumns: { type: Array, default: [] },
  pageSize: { type: Number, default: 10 },
  pageNum: { type: Number, default: 1 },
  total: { type: Number, default: 0 },
  loading: { type: Boolean, default: false }
})
const handleSizeChange = (val: number) => {
  emits('change', {
    pageNum: props.pageNum,
    pageSize: val
  })
}
const handleCurrentChange = (val: number) => {
  emits('change', {
    pageNum: val,
    pageSize: props.pageSize
  })
}
const filterHandler = (value: any, row: any, column: any) => {
  const property = column.property
  return row[property] === value
}
const showEdit = (row: any, title: any) => {
  emits('edit', { row, title })
}
const handleSelectionChange = (row: any) => {
  emits('selectionChange', row)
}

const showDelete = (row: any) => {
  ElMessageBox.confirm('您将进行删除操作，请确认', '提示', {
    distinguishCancelAndClose: true,
    confirmButtonText: '确定',
    cancelButtonText: '取消'
  }).then(() => {
    // REQUEST.POST('USERDELETE', {
    //   ids: [`${row.id}`]
    // }).then((res: any) => {
    //   if (res.status === 200) {
    //     ElMessage({
    //       type: 'success',
    //       message: '成功删除'
    //     })
    //     emits('ok')
    //   } else {
    //     ElMessage({
    //       type: 'warning',
    //       message: res.message
    //     })
    //   }
    // })
  })
}
</script>

<style lang="scss" scoped>
.pagination {
  display: flex;
  justify-content: space-between;
  align-self: center;
  margin-top: 20px;
}
</style>
